import React, { useEffect, useState } from "react";
import Taro, {
  useReachBottom,
  usePullDownRefresh,
  useRouter,
} from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import ItemCard from "@/components/ItemCard";
import ListStatusInfo from "@/components/ListStatusInfo";
import downIcon from "@/images/icon_expansion_down.png";
import upIcon from "@/images/icon_expansion_up.png";
import GoodsItem from "@/components/GoodsItem";

import * as api from "./api";
import "./index.scss";

const Index: React.FC<{}> = () => {
  const [data, setData] = useState<any>({ majorInfo: {}, schoolInfo: {} });
  const [loading, setLoading] = useState(false);
  const [schoolOpen, setSchoolOpen] = useState(false);
  const [majorOpen, setMajorOpen] = useState(false);
  const [activeKey, setActiveKey] = useState("default");
  const router = useRouter();
  const [tabMap, setTabMap] = useState<any>({
    default: { text: "高起专", total: null, current: null, data: [] },
  });

  // 初始化院校专业数据
  useEffect(() => {
    const params = JSON.parse(router.params.params);
    console.log("params--------->>>", params);
    setData(params);
  }, [router]);

  useEffect(() => {
    if (data.majorInfo.id && data.schoolInfo.id) {
      getList(1);
    }
  }, [data]);

  const getList = async (current_page = 1) => {
    try {
      setLoading(true);
      Taro.showNavigationBarLoading();
      const { result, status } = await api.production_goods_search({
        search_info: JSON.stringify({
          major_id: majorInfo.id,
          school_id: schoolInfo.id,
          category: data.category,
        }),
        current_page: current_page,
      });
      if (status === "ok") {
        const newTabMap = { ...tabMap };
        newTabMap[activeKey].current = current_page;
        newTabMap[activeKey].data =
          current_page === 1
            ? [].concat(result.data_list)
            : newTabMap[activeKey].data.concat(result.data_list);
        newTabMap[activeKey].total = result.total;
        setTabMap(newTabMap);
      }
    } catch (err) {
      console.log("err--------->>>", err);
    } finally {
      Taro.hideNavigationBarLoading();
      Taro.stopPullDownRefresh();
      setLoading(false);
    }
  };

  useReachBottom(() => {
    if (tabMap[activeKey].data.length < tabMap[activeKey].total) {
      getList(tabMap[activeKey].current + 1);
    }
  });

  const goGoodsDetail = (id) => {
    Taro.navigateTo({
      url: `/pages/goodsDetail/index?goods_id=${id}`,
    });
  };

  const { majorInfo, schoolInfo } = data;
  return (
    <View className="school-major-detail-page">
      <View className="info-box">
        <View className="info-box-top">
          <Image className="logo" src={schoolInfo.icons} />
          <View className="name">{schoolInfo.name}</View>
        </View>
        <View className={schoolOpen ? "desc desc__open" : "desc"}>
          {schoolInfo.content}
        </View>
        <View className="toggle" onClick={() => setSchoolOpen(!schoolOpen)}>
          <Image className="icon" src={schoolOpen ? upIcon : downIcon} />
          <View className="text">{schoolOpen ? "收起详情" : "展开详情"}</View>
        </View>
      </View>

      <View className="major-info">
        <View className="sub-title">{majorInfo.name}</View>
        <View className={majorOpen ? "desc desc__open" : "desc"}>
          {majorInfo.content}
        </View>
        <View className="toggle" onClick={() => setMajorOpen(!majorOpen)}>
          <Image className="icon" src={majorOpen ? upIcon : downIcon} />
          <View className="text">{majorOpen ? "收起详情" : "展开详情"}</View>
        </View>
      </View>

      {tabMap[activeKey].data.length ? (
        <View className="sub-title">助学帮助</View>
      ) : null}

      {tabMap[activeKey].data.map((item) => (
        <View key={item.id} className="goods-item-wrap">
          <GoodsItem
            {...item}
            onClick={() => {
              goGoodsDetail(item.id);
            }}
          />
        </View>
      ))}
      <ListStatusInfo
        total={tabMap[activeKey].total}
        dataLength={tabMap[activeKey].data.length}
        loading={loading}
        hideNone
        hideAll
      />
    </View>
  );
};

export default Index;
